
<script setup lang='ts'>
import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import { getPage } from '../../api/user'
import { removeToken, setLocalLanguage, getLocalLanguage } from '../../utils/common'

/**
* 路由实例
*/
const router = useRouter()
// console.log('1-开始创建组件-setup')
/**
* 数据部分
*/
const data = reactive({})
onBeforeMount(() => {
  // console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
  const language = getLocalLanguage()
  console.log('本地语言', language)
  if (language == null) {
    setLocalLanguage('zh')
  }
  const form = {
    username: '',
    page: 1,
    pageSize: 10
  }
  getPage(form).then(res => {
    console.log(res)
  })
  // console.log('3.-组件挂载到页面之后执行-------onMounted')
})

const onLogout = () => {
  console.log('退出')
  removeToken()
  router.push({ path: '/' })
}

watchEffect(() => {
})
// 使用toRefs解构
// let { } = { ...toRefs(data) }
defineExpose({
  ...toRefs(data)
})

const currentPage2 = ref(5)
const pageSize2 = ref(100)
const small = ref(false)
const disabled = ref(false)
const background = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
<template>
  <div >首页
    <el-button
      @click="onLogout"
      size="default"
      type="primary"
    >
      退出
    </el-button>
    <el-pagination
      v-model:currentPage="currentPage2"
      v-model:page-size="pageSize2"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <p>国际化测试{{$t(`menus.Home`)}}</p>
  </div>
</template>
<style scoped lang='less'>
</style>
